<!--
 * @FileDescription 顶部栏
 * @Author lz
 * @Date 20230130 11:58:35
 * @LastEditors lz
 * @LastEditTime 20230130 11:58:35
-->
<template>
    <div>
        <!-- 顶部 -->
        <!-- <div class="title">
            柴油发动机系统仿真实训教学系统
        </div> -->
        <!-- <div class="title">
            电冰箱结构认知虚拟仿真实训教学系统
        </div> -->
        <div class="title">
            {{ HomeContent.Default.ProductName.value ||  '结构认知虚拟仿真实训教学系统'}}
        </div>
        <div class="OperationArea">
            <div class="user"></div>
            <div class="name">用户</div>
            <div class="mute" v-if="props.Hierarchy != '3'" @click="MuteBtn()">
                <img class="player" src="/structure/mute.png" v-if="HomeContent.Default.pausableType.value.pausable"> 
                <div class="CloseBtn" v-else><sound-outlined /></div>
                <!-- <img class="player" src="/structure/return.png" v-if="HomeContent.Default.pausableType.value.pausable = false"> -->
            </div>
            <div class="return" @click="Fallback" v-if="props.Hierarchy != '3'">
                <!-- <div class="return" @click="Fallback" v-if="HomeContent.Default.TypeStatus.value && props.Hierarchy != '3'"> -->
            </div>
            <div class="signOut" @click="Out"></div>
        </div>
        <strMessageBox ref="messageBoxRef" :Questions="'是否关闭程序！'" :messageType="3" :ID="NaN"></strMessageBox>
        <Speak hidden :stats="HomeContent.Default.pausableType.value" ></Speak>
    </div>
</template>

<script setup lang="ts">
import Speak from "@components/TTS/Speak.vue";
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import { SoundOutlined } from '@ant-design/icons-vue';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { useRouter } from 'vue-router'
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue, defineProps, defineEmits } from 'vue'
import GameObjectComponent from '@runtime/UnityEngineBridge/GameObjectComponent';
import HomeContent from '../HomeContent';
import strMessageBox from '../strMessageBox.vue'
interface Props {
    Hierarchy: string;
    ID: number;
}
const props = defineProps<Props>();
const router = useRouter()
const state = reactive({

});
const Fallback = async function () {

    HomeContent.Default.pausableType.value.pausable = true

    if (props.Hierarchy == '1') {
        // 卸载Unity
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.EmbeddedApplicationShutdownRequest());
        router.go(-1)
    } else if (props.Hierarchy == '2') {
        // 隐藏模型
        await GameObjectComponent.Default.HideAsync(props.ID);
        router.go(-1)
    } else if (props.Hierarchy == '4') {
        // 卸载Unity
        await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.EmbeddedApplicationShutdownRequest());
        router.go(-3)
    }

}
const messageBoxRef = ref<any>();

function MuteBtn() {
    if (HomeContent.Default.endplay.value.ended) {
        HomeContent.Default.pausableType.value.pausable = true
    } else {
        HomeContent.Default.pausableType.value.pausable = !HomeContent.Default.pausableType.value.pausable
    }
}

function Out() {
    messageBoxRef.value.showModel()
}
onMounted(() => {
    HomeContent.Default.endplay.value.ended = false
});
</script>

<style scoped>
.title {
    text-align: center;
    padding-top: 10px;
    width: 730px;
    height: 100px;
    background-image: url('/structure/title_bg.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    font-size: 34px;
    font-family: PangMenZhengDao;
    font-weight: 400;
    color: #FFFFFF;
}

.OperationArea {
    position: absolute;
    top: 0;
    right: 0;
    height: 60px;
    padding-top: 18px;
    padding-right: 0px;
    margin-right: 40px;
}

.user {
    float: left;
    width: 40px;
    height: 40px;
    background-image: url('/structure/user.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.name {
    float: left;
    line-height: 40px;
    margin-left: 14px;
    font-size: 14px;
    font-weight: 400;
    color: #FDFFFF;
}

.mute {
    float: left;
    width: 40px;
    height: 40px;
    /* background-image: url('/structure/mute.png'); */
    /* background-repeat: no-repeat; */
    /* background-size: 100% 100%; */
    margin-left: 26px;
}

.player {
    background-repeat: no-repeat;
    background-size: 100% 100%
}
.CloseBtn {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 36px;
    /* margin-left: 26px; */
    font-size: 26px;
    text-align: center;
    border: 2.5px solid;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.01);
    color: rgba(115, 246, 255);
}

.return {
    float: left;
    width: 40px;
    height: 40px;
    background-image: url('/structure/return.png');
    background-repeat: no-repeat;
    margin-left: 26px;
    background-size: 100% 100%;
    background-color: rgba(255, 255, 255, 0.01);
}

.signOut {
    float: left;
    width: 40px;
    height: 40px;
    background-image: url('/structure/signOut.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 26px;
    background-color: rgba(255, 255, 255, 0.01);
}
</style>